<template>
	<view>
		<view v-for="(items,index) in taskArray" :key="index">
			<view class="set-bottom situation1" v-if="items.status == 1">
				<view class="taskdetail-top">
					<view class="taskdetail-box1 flex">
						<view>
							<h2 class="task-title">{{items.name}}</h2>
							<view class="task-todo">{{items.company_name_}}</view>
						</view>
						<view class="task-state">
							{{items.status_now}}
						</view>
					</view>
					<view class="taskdetail-box2 flex">
						<view class="task-numbox">
							<view class="task-num1">{{items.person_num}}</view>
							<view class="tast-titlenum">招聘数量</view>
						</view>
						<view class="task-numbox">
							<view class="task-num2">{{items.working}}</view>
							<view class="tast-titlenum">已招聘数量</view>
						</view>
						<view class="task-numbox">
							<view class="task-num1">{{items.recruit_msg}}</view>
							<view class="tast-titlenum">任务类型</view>
						</view>
					</view>
					<view class="taskdetail-box3 flex">
						<view class="detail-title">任务起止日期:</view>
						<view class="detail-detail">{{items.create_date}}</view>
					</view>
					<!-- <view class="taskdetail-box3 flex">
						<view class="detail-title">指派组员:</view>
						<view class="detail-detail">{{items.name}}</view>
					</view> -->
					<view class="taskdetail-box3 flex">
						<view class="detail-title">招聘小组:</view>
						<view class="detail-detail">{{items.recruit_team_name}}</view>
					</view>
				</view>
				<view class="btm-items flex">
					<view class="item"><img class="item-img" src="../../static/icon/icon_calendar.png" alt=""> 分配任务</view>
					<view class="item"><img class="item-img" src="../../static/icon/icon_present.png" alt=""> 招聘情况</view>
					<view class="item item-last"><img class="item-img" src="../../static/icon/icon_user_close.png" alt=""> 停止招聘</view>
				</view>
			</view>
			<view class="set-bottom situation1" v-if="items.status == -1">
				<view class="taskdetail-top">
					<view class="taskdetail-box1 flex">
						<view>
							<h2 class="task-title">{{items.name}}</h2>
							<view class="task-todo">{{items.company_name_}}</view>
						</view>
						<view class="task-state1">
							停止招聘
						</view>
					</view>
					<view class="taskdetail-box2 flex">
						<view class="task-numbox">
							<view class="task-num1">{{items.person_num}}</view>
							<view class="tast-titlenum">招聘数量</view>
						</view>
						<view class="task-numbox">
							<view class="task-num2">{{items.working}}</view>
							<view class="tast-titlenum">已招聘数量</view>
						</view>
						<view class="task-numbox">
							<view class="task-num1">{{items.recruit_msg}}</view>
							<view class="tast-titlenum">任务类型</view>
						</view>
					</view>
					<view class="taskdetail-box3 flex">
						<view class="detail-title">任务起止日期:</view>
						<view class="detail-detail">{{items.create_date}}</view>
					</view>
					<!-- <view class="taskdetail-box3 flex">
						<view class="detail-title">指派组员:</view>
						<view class="detail-detail">{{items.name}}</view>
					</view> -->
					<view class="taskdetail-box3 flex">
						<view class="detail-title">招聘小组:</view>
						<view class="detail-detail">{{items.recruit_team_name}}</view>
					</view>
				</view>
				<view class="btm-items flex">
					<view class="item"><img class="item-img" src="../../static/icon/icon_calendar.png" alt=""> 分配任务</view>
					<view class="item"><img class="item-img" src="../../static/icon/icon_present.png" alt=""> 招聘情况</view>
					<view class="item item-last"><img class="item-img" src="../../static/icon/icon_user_plus.png" alt=""> 重启招聘</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			taskArray:{
				type:Array
			}
		}
	}
</script>

<style scoped lang="stylus">
	.set-bottom{
		margin-bottom:20upx;
	}
	.situation1{
		.taskdetail-top{
			background:#fff;
			padding:40upx;
			.taskdetail-box1{
				height:164upx;
				align-items:center;
				justify-content:space-between;
				.task-title{
					font-size:40upx;
					font-weight:500;
					color:#333;
				}
				.task-todo{
					font-size:28upx;
					color:#666;
					margin-top:20upx;
				}
				.task-state{
					height:46upx;
					width:144upx;
					border:2upx solid #5BBD00;
					font-size:28upx;
					color:#5BBD00;
					font-weight:500;
					line-height:46upx;
					text-align:center;
				}
				//第二种情况
				.task-state1{
					height:46upx;
					width:144upx;
					border:2upx solid #999;
					font-size:28upx;
					color:#999;
					font-weight:500;
					line-height:46upx;
					text-align:center;
				}
			}
			.taskdetail-box2{
				height:176upx;
				margin-bottom:40upx;
				justify-content:space-around;
				align-items:center;
				background:linear-gradient(270deg,rgba(250,250,250,1) 0%,rgba(243,243,243,1) 100%);
				.task-numbox{
					text-align:center;
					.task-num1{
						font-size:36upx;
						font-weight:500;
						color:#333;
					}
					.task-num2{
						font-size:36upx;
						color:#4A90E2;
						font-weight:500;
					}
					.tast-titlenum{
						font-size:28upx;
						color:#666;
						margin-top:16upx;
					}
				}
				
			}
			.taskdetail-box3{
				justify-content:space-between;
				margin-bottom:20upx;
				.detail-title{
					font-size:28upx;
					color:#999;
				}
				.detail-detail{
					font-size:28upx;
					color:#333;
				}
			}
			
		}
		.btm-items{
			height:90upx;
			border-top:2upx solid #DBDBDB;
			background:#fff;
			justify-content space-around;
			align-items:center;
			.item{
				border-right:2upx solid #dbdbdb;
				width:250upx;
				text-align:center;
				font-size:28upx;
				font-weight:400;
				color:rgba(51,51,51,1);
				.item-img{
					height:26upx;
					width:26upx;
					margin-right:10upx;
				}
			}
			.item-last{
				border:0;
			}
		}
	}
	
	
</style>
